<div>
  <d-time-axis [data]="timeAxisTemplate" [contentTemplate]="customTemplate" [mode]="'alternative'"></d-time-axis>
</div>

<ng-template #customTemplate let-data="data">
  <div style="position: relative">
    <div
      *ngIf="data.position === 'bottom'"
      style="margin-bottom: 4px; position: relative; left: 4px; width: 2px; height: 40px; background-color: #dfe1e6"
    ></div>
    <div
      [style.border-color]="data.color"
      style="border-left: 4px solid; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); padding: 12px 8px"
      [style.background-color]="data.backgroundColor"
    >
      <div style="padding-bottom: 8px; font-size: 14px; font-weight: bold">{{ data.title }}</div>
      <div style="padding-bottom: 8px">发布日期：{{ data.date }}</div>
      <div style="padding-bottom: 8px">版本状态：<d-tag [tag]="data.status" [customColor]="data.color"></d-tag></div>
    </div>
    <div
      *ngIf="data.position === 'top'"
      style="margin-top: 4px; position: relative; left: 4px; width: 2px; height: 40px; background-color: #dfe1e6"
    ></div>
  </div>
</ng-template>
<ng-template #yearShow>
  <div style="text-align: center; width: 36px; height: 36px; border-radius: 18px; border: 2px solid #dfe1e6; background: white">
    <span style="line-height: 32px">2020</span>
  </div>
</ng-template>
